<template>
  <!-- -->
  <!-- <el-form ref="honorFormRef" :model="honorForm" :rules="honorFormRules" label-width="80px">
  </el-form>-->
  <div class="el-form--inline">
    <el-form-item label="名称" prop="honorName">
      <el-input v-model="form.honorName" placeholder="请输入名称" />
    </el-form-item>
    <el-form-item label="简称" prop="alternativeName">
      <el-input v-model="form.alternativeName" placeholder="请输入简称" />
    </el-form-item>
    <el-form-item label="编码" prop="honorCode">
      <el-input v-model="form.honorCode" placeholder="请输入编码" />
    </el-form-item>
    <el-form-item label="查询码" prop="lookup">
      <el-input v-model="form.lookup" placeholder="请输入查询码" />
    </el-form-item>
    <el-form-item label="种类" prop="category">
      <!-- <el-input v-model="form.category" placeholder="请输入种类" /> -->
      <el-select v-model="form.category" placeholder="请选择种类..." size="mini">
        <el-option
          v-for="item in avaiableCategories"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="级别" prop="level">
      <!-- <el-input v-model="form.level" placeholder="请输入级别" /> -->
      <el-select v-model="form.level" clearable size="mini" placeholder="请选择级别...">
        <el-option
          v-for="item in avaiableLevels"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="类型" prop="label">
      <el-input v-model="form.label" placeholder="请输入类型" />
    </el-form-item>
    <el-form-item label="获奖者" prop="winner">
      <!-- <el-input v-model="form.winner" placeholder="请输入获奖者" /> -->
      <el-autocomplete
        v-model="form.winner"
        :trigger-on-focus="false"
        :fetch-suggestions="searchWinner"
        placeholder="请输入获奖者"
        @select="handleSelectWinner"
      ></el-autocomplete>
    </el-form-item>
    <el-form-item label="获奖部门" prop="department">
      <el-input v-model="form.department" placeholder="请输入获奖部门" />
    </el-form-item>

    <el-form-item label="获奖时间" prop="awardedAt">
      <el-date-picker
        clearable
        size="small"
        v-model="form.awardedAt"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择获奖时间"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="颁奖单位" prop="awardedBy">
      <el-input v-model="form.awardedBy" placeholder="请输入颁奖单位" />
    </el-form-item>
    <!-- <el-form-item label="荣誉描述" prop="description">
      <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
    </el-form-item>-->
    <!-- <el-form-item label="封面图片" prop="coverId">
      <el-input v-model="form.coverId" placeholder="请输入封面图片" />
    </el-form-item>-->
    <el-form-item label="荣誉标签" prop="tags">
      <!-- <el-input v-model="form.tags" placeholder="请输入荣誉标签" /> -->
      <el-tag
        :key="tag"
        v-for="tag in form.tagList"
        closable
        :disable-transitions="false"
        @close="deleteTag(tag)"
      >{{ tag }}</el-tag>
      <el-input
        class="input-new-tag"
        v-if="showTagInputBox"
        v-model="newTag"
        ref="tagInputBox"
        size="small"
        @keyup.enter.native="confirmNewTag"
        @blur="confirmNewTag"
      ></el-input>
      <el-button v-else class="new-tag-button" size="small" @click="displayTagInputBox">+</el-button>
    </el-form-item>
    <!-- <el-form-item label="荣誉附件" prop="attachments">
      <el-input v-model="form.attachments" type="textarea" placeholder="请输入内容" />
    </el-form-item>-->
    <el-form-item label="状态">
      <el-radio-group v-model="form.status">
        <!-- <el-radio label="1">请选择字典生成</el-radio> -->
        <el-radio
          v-for="dict in dict.type.sys_honor_status"
          :key="dict.value"
          :label="parseInt(dict.value)"
        >{{ dict.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="删除标志">
      <el-radio-group v-model="form.deleted">
        <el-radio
          v-for="dict in dict.type.sys_show_hide"
          :key="dict.value"
          :label="parseInt(dict.value)"
        >{{ dict.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="显示顺序" prop="displayOrder">
      <el-input v-model="form.displayOrder" placeholder="请输入显示顺序" />
    </el-form-item>
  </div>
  <!-- <el-row :gutter="20" class="el-form--inline">
    <el-col :span="12">
      <div class="grid-content bg-purple">
        
      </div>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple">
        
      </div>
    </el-col>
  </el-row>-->
</template>
  
<script>
// import { getDictionaryItems } from "@/utils/ruoyi"
// import { getCategoryTree } from "@/api/archive-honor/honor";
import { listUser } from "@/api/system/user";

export default {
  name: 'HonorInfo',
  props: {
    form: Object,
    rules: Object
  },
  dicts: ['sys_yes_no', 'sys_show_hide', 'sys_honor_status'],
  data () {
    return {
      showTagInputBox: false,
      newTag: '',
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      categoryProps: {
        expandTrigger: 'hover',
        checkStrictly: true,
        label: 'categoryName',
        value: 'categoryId',
        children: 'children',

      },
      avaiableCategories: [{ id: 1, name: '学校' }, { id: 2, name: '部门' }, { id: 3, name: '个人' }],
      avaiableLevels: [
        { id: 1, name: '学校' },
        { id: 2, name: '市级' },
        { id: 3, name: '省级' },
        { id: 4, name: '国家级' },
        { id: 5, name: '国际级' }],
      categoryTree: []
      // honorFormRules:{
      //   honorName: [
      //     { required: true, message: '请输入活商品动名称', trigger: 'blur' },
      //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //   ]
      // }
      // 上架标志字典
      // publishedOptions: getDictionaryItems('sys_show_hide'),
      // 删除标志字典
      // deletedOptions: getDictionaryItems('sys_show_hide')
    }
  },
  methods: {
    searchWinner (queryString, cb) {
      console.log('queryString=', queryString)
      this.queryParams.userName = queryString;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        // this.honorList = response.rows;
        // this.total = response.total;
        // this.loading = false;
        let winners = [];
        for (var i = 0; i < response.rows.length; i++) {
          winners.push({
            id: response.rows[i].userId,
            value: response.rows[i].nickName,
            userName: response.rows[i].userName,
            "deptId": response.rows[i].deptId,
            "deptName": response.rows[i].dept.deptName,
          })

        }
        cb(winners);
      });
      // console.log('cb=', cb)
      // listUser
    },
    handleSelectWinner (winner) {
      console.log('选中了:', winner)
      this.form.winnerId = winner.id;
      // this.form.winner = winner.value; // 当前文本框已经绑定了 winner
      this.form.department = winner.deptName;
      this.form.departmentId = winner.deptId;
    },
    deleteTag (tag) {

    },
    confirmNewTag () {
      let tag = this.newTag;
      if (tag) {
        this.form.tagList.push(tag);
        // 添加后 隐藏tag输入框（一次添加一个 tag，）
        // 每次添加一个新的tag 都要手动点击 “+” 号
        // this.showTagInputBox = false;
        this.newTag = '';
        // 批量插入
        this.displayTagInputBox()
      } else {
        this.showTagInputBox = false;
      }
    },
    displayTagInputBox () {
      this.showTagInputBox = true;
      this.$nextTick(_ => {
        this.$refs.tagInputBox.$refs.input.focus();
      });
    },
    onChangeCategory (e) {
      // console.log('onChangeCategory', e)
      // console.log('this.form.parentIds select:', this.form.parentIds)

      // this.form.ancestors = this.form.parentIds.toString()
      // this.$refs.categoryCascaderRef.dropDownVisible = false

      // this.$refs.categoryCascaderRef.toggleDropDownVisible()
    },
    async getTree () {
      // const categories = await getCategoryTree()
      // // console.log('categories:', categories.data)
      // for(let c of categories.data ) {
      //   if(c.children && c.children.length === 0){
      //     c.children = null;
      //   }
      // }

      // this.categoryTree = categories.data
    },
    handleEdit () {
      return;
    },
    onSubmit () {
      // console.log('submit!');
    }
  },
  mounted () {
    // console.log('HonorInfo mounted')
    this.getTree()
    // console.log('categories:', this.categoryTree)
  },
  created () {
    // console.log('HonorInfo created')


  }
}
</script>
  
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.new-tag-button {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag.el-input.el-input--small {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
/deep/ .el-form-item--medium .el-form-item__label {
  width: 80px;
}
/* .el-form--inline .el-form-item .el-form-item__label{
    width: 80px;
  } */
/deep/ .radio-item {
  min-width: 280px;
}

/deep/ .category-picker.el-cascader .el-input {
  max-width: 202px;
}
</style>

<style>
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>